<template>
  <div class="home">
    <b-container>
      <img class="img-fluid mb-3" :src="domain + '/uploadfile/other/prayer/me.jpg'" style="width:100%">
      <div class="mb-3">
       <router-link to="/"> <div class="btn btn-primary mr-2">首页</div> </router-link>
        <router-link to="/prayeradd">
          <div class="btn btn-danger">我要祈祷</div>
        </router-link>
      </div>
      <div class="card mb-2" v-for="item in list" :key="item.id">
        <div class="card-body">
          <img class="float-left mr-2" style="max-width: 100px;" :src="domain +'/uploadfile/other/prayer/'+ item.hua_id+'.jpg'" :alt="item.title">
          <h5 class="card-title">意向：{{item.title}}</h5>
          <div class="card-text mb-2">
            <small class="text-muted">
              {{item.name}}
              <br>时间：{{item.create_time*1000 | formatDate}}
            </small>
          </div>
          <p class="card-text">{{item.content}}</p>
        </div>
      </div>
      <div v-if="list.length > 0" class="text-center my-2">
            <div class="btn btn-primary" @click="infiniteHandler(state)">加载更多</div>
          </div>
          <div v-else>
            <infinite-loading @infinite="infiniteHandler" ret="infiniteLoading"></infinite-loading>
          </div>
    </b-container>
    <FooterIndex msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import FooterIndex from "@/components/FooterIndex.vue";
import InfiniteLoading from "vue-infinite-loading";
import { mapState, mapActions, mapMutations } from "vuex";
import { formatDate } from '../util/date.js';

export default {
  name: "prayer",
  components: {
    InfiniteLoading,
    FooterIndex
  },
  data () {
    return {
      domain: process.env.VUE_APP_baseURL, state: ''
    };
  },
  computed: {
    ...mapState("prayer", ["list"])
  },
  created () {
    this.initList()
  },
  methods: {
    ...mapActions("prayer", ["changeList"]),
    ...mapMutations("prayer", ['initList']),
    infiniteHandler ($state) {
      this.state = $state
      this.changeList().then(function (ret) {
        if (ret == 1) {
          $state.loaded();
        } else {
          $state.complete();
        }
      })
    },
  },
  filters: {
    formatDate (time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd');  //显示到日 'yyyy-MM-dd hh:mm' //全部显示
    },
    formatTime (time) {
      var date = new Date(time);
      return formatDate(date, 'hh:mm');    //显示到小时
    },
  },
};
</script>

<style scoped>
@media (min-width: 576px) {
  .card-columns {
    column-count: 1;
  }
}
@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}
@media (min-width: 1200px) {
  .card-columns {
    column-count: 3;
  }
}
</style>

